<template>
  <div class="page">
    <div class="logo">
      <img src="../assets/images/ico_bg.png" alt />
      <p>注册 MImi</p>
    </div>
    <div class="login-content">
      <div class="item">
        <img src="../assets/images/ico_user.png" alt />
        <input 
        type="text" 
        placeholder="输入账号(只能为数字和字母)" 
        maxlength="12" 
        v-model="ccount"
        onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')"/>
      </div>
      <div class="item">
        <img src="../assets/images/ico_ccount.png" alt />
        <input type="text" placeholder="请输入用户名" maxlength="12" v-model="user_name"/>
      </div>
      <div class="item">
        <img src="../assets/images/ico_pwd.png" alt />
        <input type="password" placeholder="输入密码" maxlength="21" v-model="pwd"/>
      </div>
      <div class="item">
        <img src="../assets/images/ico_pwd.png" alt />
        <input type="password" placeholder="确认密码" maxlength="21" v-model="is_pwd"/>
      </div>
      <button @click="reg">注册</button>
      <p>
        已有账号，
        <a href="javascript:;" class="theme-color" @click="$router.togo('/login')">立即登录</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ccount: '',
      user_name: '',
      pwd: '',
      is_pwd: ''
    };
  },
  computed: {},
  methods: {
    reg() {
      if(!this.ccount){
        this.$toast('账号不能为空！');
      } else if(!this.user_name) {
        this.$toast('用户名不能为空！');
      } else if(!this.pwd) {
        this.$toast('密码不能为空！');
      } else if(this.pwd.length < 6) {
        this.$toast('密码需大于6位');
      } else if(this.pwd !== this.is_pwd) {
        this.$toast('两次密码输入不一致');
      } else {
				this.$loading.show();
				let u_img = Math.floor(Math.random() * 10 + 1); //生成1-10的随机数
				this.$http.register({
					ccount: this.ccount,
					u_name: this.user_name,
					pass: this.pwd,
					u_img: u_img
				}).then((res) => {
					this.$loading.hide();
					console.log(res);
					if(res.code === 0){
						this.$toast(res.msg);
						setTimeout(()=>{
							this.$router.togo('/login');
						}, 1500);
					} else {
						this.$toast(res.msg);
					}
				})
      }
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
@import "styles/common.scss";
.page{
  background: #fff;
  min-height: 100vh;
}
.logo {
  position: relative;
  img {
    width: 100%;
  }
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $base-color;
    font-size: rem(60);
    font-weight: bold;
  }
}
.login-content {
  margin: rem(80) rem(60) 0 rem(60);
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: rem(20);
    border-bottom: 1px solid #ddd;
    img {
      width: rem(38);
    }
    input {
      padding: rem(20) rem(40);
      width: 100%;
      color: #484848;
    }
  }
  button {
    margin-bottom: rem(40);
  }
}
</style>
